<template>
  <button class="w-button" :class="styleClass"   @click="handleClick">
    <span v-if="icon">
      <w-icon :name='icon'></w-icon>
      <!-- <span>{{icon}}</span> -->
    </span>
    <slot></slot>
  </button>
</template>

<script>
export default {
  name: "w-button",
  props: {
    type: {
      type: String,
      default: "",
      validator: (value) => {
        return ["primary", "success", "warning", "danger"].includes(value);
      },
    },
    disabled:{
      type:Boolean,
      default:false
    },
    round:{
      type:Boolean,
      default:false
    },
    icon:{
      type:String,
      default:''
    }
  },
  computed: {
    styleClass() {
      return {
        [`w-button--${this.type}`]: this.type,
        [`is-round`]:this.round,
        'is-disabled':this.disabled
      };
    },
  },
  data() {
    return {};
  },

  mounted() {},

  methods: {  handleClick() {
      this.$emit("click");
    }},
};
</script>

<style  css scoped>
@import './button.css'
</style>